extends ../../src/pug/index.pug
block body
  -var order = 0
  -var padding = 60
  -var lineheight = 250
  -var optTxt = ['A', 'B', 'C', 'D']
  -var q1 = {txt: '1. First question example for answer',    check: 2, optTxt}
  -var q2 = {txt: '2. Second question example for answer',   check: 3, optTxt}
  -var q3 = {txt: '3. Third question example for answer',    check: 1, optTxt}
  -var q4 = {txt: '4. Fourth question example for answer',   check: 4, optTxt}
  -var q5 = {txt: '5. Fifth question example for answer',    check: 2, optTxt}
  -var q6 = {txt: '6. Sixth question example for answer',    check: 3, optTxt}
  -var q7 = {txt: '7. Seventh question example for answer',  check: 1, optTxt}
  -var q8 = {txt: '8. Eighth question example for answer',   check: 3, optTxt}
  -var questions = [q1, q2, q3, q4, q5, q6, q7, q8]

  svg(viewBox="0 0 900 3800")

    // First-Layer: questions-area
    -var questionY = 0
    -var answerY = 0
    - for (idx in questions) {
      -var question = questions[idx]
      -answerY = padding + lineheight * questions.length
      text.question(x=padding, y=padding + lineheight * idx, font-size=36)=question.txt
      - for (var i = 0; i < 4; i++ ) {
        -var optX = padding + 40 + 200 * i
        -var optY = padding * 2  + lineheight * idx
        -var optTxtX= optX + 60
        rect.checkbox(x=optX, y=optY, width=40, height=40, stroke-width=2, stroke="black" fill="none")
        text.answer(x=optTxtX, y=optY + 30, font-size=36, font-weight="bold")=question.optTxt[i]
      - }
    -}

    // First-Layer: answer-card-area
    -for (idx in questions) {
      -order += 1
      -isFirstCol = order < questions.length / 2 + 1
      -var offset = isFirstCol ?  0 : 420
      -var optY = answerY + padding * 2  + 80 * (isFirstCol ? order : order - questions.length / 2)
      text.order(x=padding + offset, y=optY + 30, font-size=32, font-weight="bold")=order
      - for (var i = 0; i < 4; i++ ) {
        -var optX =  padding + offset + 40 + 70 * i 
        -var optTxtX= optX
        text.answer-card(x=optTxtX, y=optY + 30, font-size=28, font-weight="bold")='['+question.optTxt[i] + ']'
      - }
    -}

    // SECOND-LAYER: answer-card-check-right-area
    g.second-layer.right-answer(opacity="0")
      animate(attributeName="opacity" values="0; 1" begin="click" dur="0.2s", fill="freeze", repeatCount="0")
      -order = 0
      -for (idx in questions) {
        -order += 1
        -isFirstCol = order < questions.length / 2 + 1
        -var offset = isFirstCol ?  0 : 420
        -var optY = answerY + padding * 2  + 80 * (isFirstCol ? order : order - questions.length / 2)
        - for (var i = 0; i < 4; i++ ) {
          -var optX =  padding + offset + 40 + 70 * i 
          -var optTxtX= optX
          if(questions[idx].check == i)
            rect.checkbox(x=optX, y=optY, width=40, height=40, fill="red")
        - }
      -}
      g.show-answer-button-for-click
        -var btnWidth = 750
        -var btnHeight = 120
        rect.show-answer-button(x=padding, y=optY + lineheight/2, width=btnWidth, height=btnHeight, fill="red" rx="20" ry="20")
        text.show-answer-btn-txt(x=padding + btnWidth / 2, y=optY + lineheight/2 + btnHeight / 1.8, font-size=32, font-weight="bold", fill="#fff" text-anchor="middle") Show answer
    g.show-answer-button-for-display(style="pointer-events:none")
      -var btnWidth = 750
      -var btnHeight = 120
      rect.show-answer-button(x=padding, y=optY + lineheight/2, width=btnWidth, height=btnHeight, fill="red" rx="20" ry="20")
      text.show-answer-btn-txt(x=padding + btnWidth / 2, y=optY + lineheight/2 + btnHeight / 1.8, font-size=32, font-weight="bold", fill="#fff" text-anchor="middle") Show answer
